<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="referrer" content="no-referrer" />
      <title> - 登录界面 - </title>
      <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
      <link rel="stylesheet" href="./stylesheets/login.css">
</head>

<body>

      <!-- 页面头部 -->
      <div class="header-box">
            <div class="header">
                  <!-- 头部导航 -->
                  <div class="header-nav">
                        <a class="header-logo" href="/">
                              <img src="//static.21cake.com/themes/site/img/logo.png" alt="21cake logo">
                              <!-- <img src="/themes/site/img/logo.png" alt=""> -->
                        </a>
                        <!-- 导航中部 -->
                        <ul class="nav-box">
                              <li><a href="./index.html">首页</a></li>
                              <li><a href="./goodsList_pagination.html" target="_self">蛋糕</a></li>
                              <li><a href="./goodsList_pagination.html" target="_self">面包</a></li>
                              <li><a href="./goodsList_pagination.html" target="_self">冰淇淋</a></li>
                              <li><a href="./goodsList_pagination.html" target="_self">咖啡下午茶</a></li>
                              <li><a href="./goodsList_pagination.html" target="_self">咖啡全国送</a></li>
                              <li><a href="./goodsList_pagination.html" target="_self">企业专区</a></li>
                        </ul>
                        <!-- 导航右侧 -->
                        <ul class="right-city-user">
                              <li class="header-app app-download">
                                    <a>APP下载</a>
                                    <ul class="app-list">
                                          <li><img
                                                      src="https://static.21cake.com/themes/site/img/footer-erweima.png"><a>下载享更多优惠</a>
                                          </li>
                                    </ul>
                              </li>
                              <li class="current-city"><a>北京<i></i></a>
                                    <ul class="current-city-list">
                                          <li><a>上海</a></li>
                                          <li><a>天津</a></li>
                                          <li><a>杭州</a></li>
                                          <li><a>无锡</a></li>
                                          <li><a>苏州</a></li>
                                          <li><a>广州</a></li>
                                          <li><a>深圳</a></li>
                                    </ul>
                              </li>
                              <li class="message-list-header  header-select">
                                    <a href="/message/center.html">消息</a>
                                    <ul>
                                          <li><a href="/message/center.html" target="_blank">通知</a></li>
                                          <li><a href="/message/center.html?#delivery" target="_blank">物流</a></li>
                                    </ul>
                              </li>
                              <li><a href="./login.html">登录</a>/
                                    <a href="./register.html">注册</a>
                              </li>
                              <li class="header-cart">
                                    <a href="./carts.html" id="cart-count-icon">
                                          <i></i>
                                    </a>
                              </li>
                        </ul>
                  </div>
            </div>
      </div>

      <!-- 内容表单  -->
      <div class="container">

            <div class="row">
                  <div class="alert tip" role="alert">
                        <a href="#" class="alert-link">...</a>
                  </div>
                  <div class="col-md-6 col-md-offset-3">
                        <h3>请登录</h3>
                        <form class="login-form" id="login_form">
                              <div class="form-group">
                                    <div class="input-group">
                                          <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                                          用户名：<input type="text" class="form-control" id="username" placeholder="请输入用户名"
                                                value="">
                                    </div>
                              </div>
                              <div class="form-group">
                                    <div class="input-group">
                                          <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                                          密码：<input type="password" class="form-control" id="password" placeholder="请输入密码"
                                                value="">
                                    </div>
                              </div>

                              <button type="submit" class="btn btn-primary" id="login">登陆</button>
                        </form>
                  </div>
            </div>

      </div>


      <!-- 内容表单  end-->


      <script>
            var login = document.getElementById("login");
            var form = document.getElementById("login_form");
            var userIpt = document.getElementById("username");
            var pwdIpt = document.getElementById("password");

            var cookie_username = getCookie("username");
            var cookie_password = getCookie("password");

            var alert = document.querySelector(".alert");
            var loading = false;

            // console.log(cookie_pass,cookie_user);
            if (cookie_username && cookie_password) {
                  userIpt.value = cookie_username;
                  pwdIpt.value = cookie_password;
            }
            // 阻止表单默认事件;
            form.onsubmit = function (evt) {
                  var e = evt || window.event;
                  e.preventDefault();
            }
            // 获取数据发送请求;
            login.onclick = function () {
                  if (loading) return false;
                  var username = userIpt.value;
                  var password = pwdIpt.value;
                  loading = true;
                  login.disabled = "disabled";
                  login.innerHTML = "loading";

                  xhrPost("http://47.107.82.140/yuanzhimin/login.php", { username, password }).then(res => {
                        console.log(res);
                        loading = false;
                        login.removeAttribute("disabled");
                        login.innerHTML = "登录";
                        res = JSON.parse(res);

                        if (res.statu === "success") {
                              showInfo("success", "恭喜您登录成功！");
                              setTimeout(() => {
                                    location.href = "./index.html";
                              }, 1000)
                        } else if (res.statu === "error") {
                              showInfo("error", res.errorType);

                        }


                  })
            }
            //提示的封装
            function showInfo(type, text) {
                  var children = alert.children[0];
                  if (type === "success") {
                        alert.className = "alert success";
                  } else if (type === "error") {
                        alert.className = "alert danger";
                  }
                  //显示内容
                  children.innerHTML = text;
                  alert.style.display = "block";


                  setTimeout(() => {
                        alert.style.display = "none";
                  }, 3000)

            }

            //post请求的封装
            function xhrPost(url, data) {
                  return new Promise((resolve, reject) => {
                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", url);
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                        var _data = [];
                        for (let key in data) {
                              _data.push(`${key}=${data[key]}`);
                        }
                        xhr.send(_data.join("&"));
                        xhr.onload = function () {
                              xhr.status === 200 ? resolve(xhr.responseText) : reject(xhr.status);
                        }
                  })
            }

            function getCookie(key) {
                  var _cookie = document.cookie;
                  // "key=value; key2=value; key3=value";
                  var _cookie_item = _cookie.split("; ");
                  var _key = [];
                  var _value = _cookie_item.map(item => {
                        var _temp = item.split("=");
                        _key.push(_temp[0]);
                        return _temp[1];
                  })
                  var index = _key.indexOf(key);
                  if (index !== -1) {
                        return _value[index];
                  }
                  return "";
            }


      </script>

      <!-- 底部 -->
      <div class="footer">
            <img class="footer-logo" src="//static.21cake.com/themes/site/img/footer-logo.png" height="36" width="96"
                  alt="">
            <div class="footer-nav">
                  <a href="/doc-about-55.html">联系我们</a>
                  <span>|</span>
                  <a href="/doc-distribution-40.html">订购帮助</a>
                  <span>|</span>
                  <a href="/doc-about-56.html">企业合作</a>
                  <span>|</span>
                  <a href="/doc-about-115.html">生产经营资质</a>
                  <span>|</span>
                  <a href="/article-company.html">公告专区</a>
            </div>
            <div class="footer-icon">
                  <a href="http://weibo.com/21cake" target="_blank">
                        <img src="//static.21cake.com/themes/site/img/footericon-01.png">
                  </a>
                  <a class="footer-weixin">
                        <div class="footer-erweima footer-weixin-erweima" style="display: none;">
                              <img src="//static.21cake.com/themes/site/img/erweima.png" style="top: 0px;">
                        </div>
                        <img src="//static.21cake.com/themes/site/img/footericon-02.png">
                  </a>
                  <a class="footer-app">
                        <div class="footer-erweima footer-app-erweima">
                              <img src="//static.21cake.com/themes/site/img/footer-erweima.png">
                        </div>
                        <!-- <img src="//static.21cake.com/themes/site/img/footericon-03.png"> -->
                        APP
                  </a>
            </div>

            <div class="footer-text">
                  <span>订购专线：400 650 2121（服务时间 08:00–22:00），企业团购热线：021-37768396</span>
                  <span>客服电话：021-23099721（全国），kefu@21cake.com（邮箱）</span>
                  <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核）
                  </span>
                  <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
                  <span>网站注册公司名称: 北京廿一客食品有限公司 地址: 北京市北京经济技术开发区兴海二街5号院3号楼 </span>
            </div>
            <div class="footer-copyright">
                  <span>Copyright© 21Cake蛋糕官网商城 2007-2018, 版权所有 <a style="color: #9a9a9a" target="_blank"
                              href="http://www.miitbeian.gov.cn/">京ICP备14006254号-1</a></span>
            </div>
      </div>

      <!-- <script src="./scripts/libs.js"></script> -->
      <!-- <script src="./scripts/login.js"></script> -->
</body>

</html>